<template>
	<view class="share-extract">
		<view class="extract-content">
			<view class="line-content">
				<view class="line-title">可用余额</view>
				<view class="line-money">{{ extract_money }}</view>
			</view>
		</view>
		<view class="content">
			<view class="top-content">
				<view class="title">提现金额<text class="tips">手续费: <text class="precentage">{{ precentage }}%</text></text>
				</view>
				<view class="select-content">
					<view :class="`button ${index == cur ? 'active' : ''}`" v-for="(res, index) in buttonList_one"
						:key="index" @tap="selectPrice(1, index)">
						{{ res }}
					</view>
				</view>
				<view class="select-content">
					<view :class="`button ${index == cur - 3 ? 'active' : ''}`" v-for="(res, index) in buttonList_two"
						:key="index" @tap="selectPrice(2, index)">
						{{ res }}
					</view>
				</view>
				<!-- <view class="button-group">
					<view class="button" @click="select(0)">
						<view class="left">
							<image class="image" src="/static/images/common/creditCard.png"></image>
							<view class="text">银行卡</view>
						</view>
						<view class="right" v-show="isSelect === 0">
							<image class="image" src="/static/images/common/select.png"></image>
						</view>
					</view>
					<view class="button" @click="select(1)">
						<view class="left">
							<image class="image" src="/static/images/common/alipay.png"></image>
							<view class="text">支付宝</view>
						</view>
						<view class="right" v-show="isSelect === 1">
							<image class="image" src="/static/images/common/select.png"></image>
						</view>
					</view>
					<view class="button" @click="select(2)">
						<view class="left">
							<image class="image" src="/static/images/common/wechat.png"></image>
							<view class="text">微信</view>
						</view>
						<view class="right" v-show="isSelect === 2">
							<image class="image" src="/static/images/common/select.png"></image>
						</view>
					</view> 
				</view>-->
			</view>
			<view class="mid-content">
				<view class="title">提现金额</view>
				<view class="input-content">
					<input class="input-style" placeholder-class="placeholder-style" type="number" placeholder="请输入提现金额"
						v-model="number" @input="onKeyInput" :focus="numberFocus" @blur="lostFocus">
				</view>
			</view>
			<view class="tips-content">
				<view class="left">
					<text class="title">
						手续费:
						<text class="charge">{{ charge == '' ? 0 : charge }}</text>
					</text>
				</view>
			</view>
			<view class="bottom-placeholder"></view>
		</view>
		<!-- 确定提现 -->
		<view class="button-content">
			<view class="total-price">
				<text class="price">{{ number == '' ? 0 : number }}</text>
				<text class="tips">提现总额</text>
			</view>
			<view class="button" @tap="extract">确定提现</view>
		</view>
		<!-- 弹窗 -->
		<view class="mask" v-if="showTips" @touchmove.stop.prevent>
			<u-transition :show="showTips">
				<view class="modal-bg-box">
					<view class="title">提示</view>
					<view class="inner-box">
						<text class="text-tips" :selectable="false">{{ tips }}</text>
						<view class="button-box">
							<view class="button-two" @click="confirm">确定</view>
						</view>
					</view>
				</view>
			</u-transition>
		</view>
	</view>
</template>

<script>
	import Fn from '@/common/public.js';
	import {
		reward,
		draw,
		GETuserinfo
	} from '@/common/api.js';
	export default {
		data() {
			return {
				/* 按钮 */
				// isSelect: 0, // 选择提现方式
				cur: -1, // 选中金额
				buttonList_one: [
					'100',
					'200',
					'300',
				], // 金额选择
				buttonList_two: [
					'500',
					'1000',
					'2000'
				], // 金额选择
				number: '', // 提现金额
				numberFocus: false, // 提现金额输入框聚焦
				precentage: '3', // 手续费百分比
				charge: '', // 手续费

				/* 提现金额 */
				extract_money: '0', // 可提现佣金

				/* 弹窗 */
				tips: '', // 弹窗提示
				showTips: false, // 弹窗状态
				isSuccess: false, // 禁止点击
			};
		},
		onLoad() {
			this.getReward(); // 每次进入重新获取分享奖励
		},
		onShow() {

		},
		methods: {

			/* 我的余额信息 */
			getReward() {
				const that = this;
				GETuserinfo().then((res) => {
					const that = this;
					if (res.status === 1) {
						const result = res.data;
						// console.log(result);
						that.extract_money = Fn.checkDigit({
							number: result.bonusPoints,
							len: 1,
							max: 100000000,
							min: -1
						});
					} else {
						Fn.Toast(res.msg, 3, 1500);
					};
				});
			},

			/* 选择提现金额 */
			selectPrice(type, index) {
				const that = this;
				if (type == 1) { // 100 200 300
					that.cur = index;
					if (index == 0) {
						that.number = 100;
					} else if (index == 1) {
						that.number = 200;
					} else {
						that.number = 300;
					}
				} else { // 500 1000 2000
					that.cur = parseInt(index) + 3;
					if (index == 0) {
						that.number = 500;
					} else if (index == 1) {
						that.number = 1000;
					} else {
						that.number = 2000;
					}
				}
			},

			/* 输入框 - 失去焦点时 */
			lostFocus(event) {
				const that = this;
				that.numberFocus = false;
			},
			// 实时获取输入值
			onKeyInput(event) {
				const that = this;
				that.number = event.target.value;
				that.cur = -1; // 如果输入框输入数据就取消选择框
			},

			/* 确认提交 提现申请 */
			extract() {
				// this.$debounce(this.confirmExtract, 1500, true); // 提现按钮 - 防抖
				// uni.$u.debounce(that.confirmExtract, 500);
				uni.$u.throttle(this.confirmExtract, 1000); // 提现按钮 - 节流
			},
			// 提现
			confirmExtract() {
				const that = this;
				// if (that.isSelect != 0 && that.isSelect != 1 && that.isSelect != 2) {
				// 	Fn.Toast('请选择提现方式', 3, 1500);
				// 	return;
				// };
				if (that.number === '') {
					Fn.Toast('提现金额不能为空', 3, 1500);
					that.numberFocus = true;
					return;
				} else if (that.number <= 0) {
					Fn.Toast('提现金额不能少于0', 3, 1500);
					that.number = '';
					that.numberFocus = true;
				};
				if (parseFloat(that.number) > parseFloat(that.extract_money)) {
					Fn.Toast('可提现佣金不足，请重新输入', 3, 1500);
					that.number = '';
					that.numberFocus = true;
					return;
				};
				if (!isNaN(that.number) && that.number % 1 === 0) {
					const type = that.isSelect;
					this.isSuccess = true; // 请求中不可点
					const params = {
						money: that.number,
						type: type + 1
					};
					draw(params).then((res) => {
						if (res.status == 1) {
							that.showTips = true;
							that.tips = res.msg;
						} else {
							Fn.Toast(res.msg, 3, 1500);
							that.isSuccess = false; // 失败后可以点
						};
					});
				} else {
					Fn.Toast('请输入整数提现金额', 3, 1500);
					that.number = '';
					that.numberFocus = true;
					return;
				};
			},

			/* 弹窗 - 取消提示 */
			cancel() {
				this.showTips = false;
			},
			// 确认提现成功
			confirm() {
				this.number = '';
				this.showTips = false;
				this.isSuccess = false; // 成功后刷新可以点
				this.getReward();
			},

			// /* 选择提现方式 */
			// select(id) {
			// 	if (id === 0) {
			// 		this.isSelect = 0;
			// 	} else if (id === 1) {
			// 		this.isSelect = 1;
			// 	} else if (id === 2) {
			// 		this.isSelect = 2;
			// 	};
			// },
		}
	}
</script>

<style lang="scss">
	.share-extract {
		padding: 30rpx 18px;
		font-family: AlibabaPuHuiTi_2_65_Medium;

		.mask {
			position: fixed;
			z-index: 1001;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.5);

			.modal-bg-box {
				background-color: #FFFFFF;
				width: 580rpx;
				position: absolute;
				left: 50%;
				top: 45%;
				transform: translate(-50%, -50%);

				.title {
					text-align: center;
					margin: 40rpx 0;
					font-size: 42rpx;
					font-family: PingFang_Bold;
				}

				.inner-box {
					margin: 20rpx 20rpx 40rpx 20rpx;
					text-align: center;

					.text-tips {
						display: block;
						line-height: 70rpx;
						font-size: 36rpx;
						color: #89898C;
						font-family: PingFang_Bold;
					}

					.button-box {
						text-align: center;
						margin-top: 50rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.button-one {
							display: inline-block;
							width: 120rpx;
							height: 58rpx;
							line-height: 58rpx;
							margin: 0 40rpx 0 0;
							text-align: center;
							color: #000000;
							border: 2px solid #000000;
							border-radius: 10rpx;
							font-size: 26rpx;
							font-family: PingFang_Bold;
						}

						.button-two {
							background-color: #000000;
							display: inline-block;
							width: 120rpx;
							height: 58rpx;
							line-height: 58rpx;
							text-align: center;
							color: #FFFFFF;
							border-radius: 10rpx;
							font-size: 26rpx;
							font-family: PingFang_Bold;
						}
					}
				}
			}
		}

		.extract-content {
			height: 220rpx;
			background-image: url('~@/static/images/mine/extract/background.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			border-radius: 20rpx;
			box-shadow: 0px 2px 5px rgba(247, 29, 31, 0.5);
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.line-content {
				text-align: center;

				.line-title {
					color: rgba(255, 255, 255, 0.7);
					font-size: 34rpx;
					font-family: AlibabaPuHuiTi_2_55_Regular;
				}

				.line-money {
					color: #FFFFFF;
					font-size: 56rpx;
					font-family: AlibabaPuHuiTi_2_85_Bold;
				}
			}
		}

		.content {
			margin-top: 40rpx;

			.top-content {

				.title {
					font-size: 38rpx;
					font-family: AlibabaPuHuiTi_2_65_Medium;

					.tips {
						margin-left: 10rpx;
						color: #999999;
						font-size: 28rpx;
						font-family: AlibabaPuHuiTi_2_55_Regular;
					}

					.precentage {
						margin-left: 10rpx;
						color: #E24146;
					}
				}

				.select-content {
					margin-top: 40rpx;
					display: flex;
					align-items: center;

					.button {
						width: calc(33.3333% - 20rpx);
						margin: 0 10rpx;
						padding: 30rpx 0;
						text-align: center;
						box-shadow: 0px 2px 5px #dedede;
						border: 1px solid #FFFFFF;
						border-radius: 10rpx;
						font-size: 36rpx;
					}

					.active {
						border: 1px solid #E24146;
					}
				}

				// .button-group {
				// 	margin-top: 30rpx;

				// 	.button {
				// 		padding: 20rpx;
				// 		border: 1px solid #F4F4F5;
				// 		display: flex;
				// 		align-items: center;
				// 		justify-content: space-between;

				// 		&:nth-of-type(n+2) {
				// 			margin-top: 30rpx;
				// 		}

				// 		.left {
				// 			display: flex;
				// 			align-items: center;

				// 			.image {
				// 				width: 7vw;
				// 				height: 7vw;
				// 			}

				// 			.text {
				// 				margin-left: 20rpx;
				// 				font-size: 14px;
				// 				font-family: PingFang_Bold;
				// 			}
				// 		}

				// 		.right {

				// 			.image {
				// 				width: 4vw;
				// 				height: 4vw;
				// 			}
				// 		}
				// 	}
				// }
			}

			.mid-content {
				margin-top: 40rpx;
				padding: 30rpx;
				border: 1px solid #F4F4F5;
				border-radius: 14rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.title {
					font-size: 32rpx;
					font-family: AlibabaPuHuiTi_2_55_Regular;
				}

				.input-content {

					.input-style {
						width: 240rpx;
						font-size: 30rpx;
						font-family: AlibabaPuHuiTi_2_55_Regular;
						text-align: right;
					}

					.placeholder-style {
						color: rgba(37, 54, 90, 0.4);
					}
				}
			}

			.tips-content {
				margin-top: 8rpx;
				font-family: AlibabaPuHuiTi_2_55_Regular;

				.left {
					font-size: 28rpx;

					.title {
						color: #999999;
					}

					.charge {
						color: #E24146;
						margin-left: 10rpx;
					}
				}
			}
		}

		.button-content {
			background-image: url('~@/static/images/mine/extract/button_background.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			position: fixed;
			height: 110rpx;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.total-price {
				max-width: 50vw;
				display: flex;
				align-items: center;
				margin-left: 50rpx;
				color: #F71D1F;
				font-size: 48rpx;
				font-family: AlibabaPuHuiTi_2_85_Bold;

				.price {
					max-width: 30vw;
					word-break: keep-all;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.tips {
					margin-left: 20rpx;
					color: rgba(37, 54, 90, 0.5);
					font-size: 28rpx;
					font-family: AlibabaPuHuiTi_2_65_Medium;
				}
			}

			.button {
				width: 240rpx;
				height: 110rpx;
				background-color: #F71D1F;
				color: #FFFFFF;
				line-height: 110rpx;
				text-align: center;
			}
		}

		.bottom-placeholder {
			height: 110rpx;
		}
	}
</style>
